window.addEventListener('load', function () {
  let cateName = document.querySelector('.cateName')
  let str = decodeURI(location.search.split('&')[1].split('=')[1])
  let categoryId = location.search.split('&')[0].split('=')[1]
  console.log(categoryId)
  cateName.innerHTML = str;
  // 详情页面内容渲染
  ajax({
    type: 'get',
    url: baseUrl + '/article/list',  // 请求地址
    data: {
      categoryId
    },
    success: function (res) {
      console.log(res)
      // 分页
      layui.use(['laypage', 'layer'], function () {
        var laypage = layui.laypage;

        //执行一个laypage实例
      
        data = res.data;
        laypage.render({
          elem: 'demo7'
          , count: res.count //数据总数，从服务端得到
          ,limit:5
          , layout: ['prev', 'page', 'next',  'skip']
          , jump: function (obj) {
            console.log(obj)
            //模拟渲染
            document.querySelector('.content').innerHTML = function () {
              var arr = []
               , thisData = data.concat().splice(obj.curr * obj.limit - obj.limit, obj.limit);
               layui.each(thisData, function (index, item) {
                let time = changeTime(item.addtime)
                arr.push(`<div class="layui-col-md12">
                <div class="main list">
                    <div class="subject">
                    <a href="javascript:;" >${item.title}</a><em>${time}发布</em></div>
                    <div class="content layui-row">
                        <div class="layui-col-md4 list-img">
                            <a href="javascript:;"><img src="${item.coverImg}"></a>
                        </div>
                        <div class="layui-col-md8">
                            <div class="list-text">${item.description}</div>
                            <div class="list-stat layui-row">
          
                                <div class="layui-col-xs3 layui-col-md3 Label">
                                    <i class="layui-icon layui-icon-note"></i>
                                    <a href="javascript:;">PHP</a>
                                    <a href="javascript:;">Discuz</a>
                                </div>
          
                                <div class="layui-col-xs3 layui-col-md3">
                                    <i class="layui-icon layui-icon-reply-fill"></i>
                                    <em>12条评论</em>
                                </div>
          
                                <div class="layui-col-xs3 layui-col-md3">
                                    <i class="layui-icon layui-icon-read"></i>
                                    <em>12次阅读</em>
                                </div>
          
                                <div class="layui-col-xs3 layui-col-md3 alink">
                                    <a href="./detail.html?id=${item.id}" class="layui-btn layui-btn-xs">阅读原文</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md12 margin20"></div>`);
              });
              return arr.join('');
            }();
          }
        });
      });



  //     let str1 = '';
  //     res.data.forEach(item => {
  //       let time = changeTime(item.addtime)
  //       str1 += `<div class="layui-col-md12">
  //     <div class="main list">
  //         <div class="subject">
  //         <a href="javascript:;" >${item.title}</a><em>${time}发布</em></div>
  //         <div class="content layui-row">
  //             <div class="layui-col-md4 list-img">
  //                 <a href="javascript:;"><img src="${item.coverImg}"></a>
  //             </div>
  //             <div class="layui-col-md8">
  //                 <div class="list-text">${item.description}</div>
  //                 <div class="list-stat layui-row">

  //                     <div class="layui-col-xs3 layui-col-md3 Label">
  //                         <i class="layui-icon layui-icon-note"></i>
  //                         <a href="javascript:;">PHP</a>
  //                         <a href="javascript:;">Discuz</a>
  //                     </div>

  //                     <div class="layui-col-xs3 layui-col-md3">
  //                         <i class="layui-icon layui-icon-reply-fill"></i>
  //                         <em>12条评论</em>
  //                     </div>

  //                     <div class="layui-col-xs3 layui-col-md3">
  //                         <i class="layui-icon layui-icon-read"></i>
  //                         <em>12次阅读</em>
  //                     </div>

  //                     <div class="layui-col-xs3 layui-col-md3 alink">
  //                         <a href="./detail.html?id=${item.id}" class="layui-btn layui-btn-xs">阅读原文</a>
  //                     </div>
  //                 </div>
  //             </div>
  //         </div>
  //     </div>
  // </div>
  // <div class="layui-col-md12 margin20"></div>`
  //     });
  //     let content = document.querySelector('.content')
  //     content.innerHTML = str1



      //封装处理时间的函数
      function changeTime (time) {
        let d = new Date(time * 1000);
        let yy = d.getFullYear();
        let mouth = d.getMonth();
        let day = d.getDate();
        let hh = d.getHours();
        let mm = d.getMinutes();
        let ss = d.getSeconds();
        return yy + '年' + mouth + '月' + day + '日' + hh + '时' + mm + '分' + ss + '秒'
      }


    }
  })

})